import type { FormInstance } from 'element-plus'
import type { ChangeLoopGroupModalPropsType } from './typings'
import type { LoopSwitchGroupDataItemType } from '../group/typings'
import { ref, reactive } from 'vue'
import { useStore } from 'vuex'
import {
  ElDialog,
  ElForm,
  ElFormItem,
  ElRadioGroup,
  ElRadio,
  ElButton,
  ElSkeleton,
  ElTooltip,
  ElMessage
} from 'element-plus'
import useVuexGetters from '~/hooks/useVuexGetters'
import { MODAL_NORMAL_WIDTH } from '~/utils/const'
import styles from '../../index.module.scss'

export default function ChangeLoopGroupModal(props: ChangeLoopGroupModalPropsType) {
  const { cancel } = props
  const store = useStore()
  const loadingRef = ref<boolean>()
  const ruleFormRef = ref<FormInstance>()
  const formValues = reactive<ChangeLoopGroupModalPropsType['detail']>(props.detail || {})
  const loopSwitchGroupState = useVuexGetters('loopSwitchGroup', ['taskGroupHardwareSelectList'])

  // 获取可选择分组列表
  const handleGetGroupList = async () => {
    loadingRef.value = true
    await store.dispatch('loopSwitchGroup/GetTaskGroupHardwareList')
    loadingRef.value = false
  }

  // 提交
  const handleSubmit = async () => {
    if (!ruleFormRef.value) return
    if (formValues.groupId === null) {
      ElMessage({ type: 'warning', message: '请选择要变更的分组' })
      return
    }
    ruleFormRef.value.validate(async (valid) => {
      if (!valid) return
      loadingRef.value = true
      const params = { ...formValues }
      // if (params.groupId === undefined) delete params.groupId
      const res = await store.dispatch('loopSwitchGroup/ChangeLoopGroupByLoopIds', params)
      loadingRef.value = false
      if (res?.code === 200) {
        ElMessage({ type: 'success', message: '操作成功' })
        cancel()
      }
    })
  }

  // 初始化可选分组列表
  handleGetGroupList()

  return (
    <ElDialog
      width={MODAL_NORMAL_WIDTH}
      title="变更分组"
      modelValue={props.visible}
      closeOnClickModal={false} // 点遮罩层不关弹窗
      draggable // 可拖拽
      beforeClose={cancel}
      v-slots={{
        footer: () => (
          <>
            <ElButton type="primary" loading={loadingRef.value} onClick={handleSubmit}>
              保存
            </ElButton>
            <ElButton onClick={cancel}>取消</ElButton>
          </>
        )
      }}
    >
      <ElForm ref={ruleFormRef} model={formValues} labelPosition="top">
        <ElFormItem
          v-show={loopSwitchGroupState.taskGroupHardwareSelectList.value?.length}
          prop="groupId"
          label="选择分组"
          rules={[{ required: false, message: '请选择分组' }]}
        >
          <ElRadioGroup v-model={formValues.groupId} class={styles['choose-group-radio']}>
            {loopSwitchGroupState.taskGroupHardwareSelectList.value?.map(
              (item: LoopSwitchGroupDataItemType) => (
                <ElRadio label={item.id}>
                  <ElTooltip content={item.groupName}>{item.groupName}</ElTooltip>
                </ElRadio>
              )
            )}
          </ElRadioGroup>
        </ElFormItem>
        <ElSkeleton v-show={!loopSwitchGroupState.taskGroupHardwareSelectList.value?.length} />
      </ElForm>
    </ElDialog>
  )
}
